<template>
  <div>
    <h2>门店列表</h2>
    <input type="button" value="添加" class="btn btn-success" @click="add" />
    <hr />
    <div>
      门店名称:<input type="text" v-model="model.shopName" />

      <input
        type="button"
        value="查询"
        class="btn btn-success"
        @click="getlist"
      />
      <input
        type="button"
        value="批量删除"
        class="btn btn-danger"
        @click="delAll"
      />

      <input
        type="button"
        value="批量上架"
        class="btn btn-info"
        @click="upOrDown(1)"
      />
      <input
        type="button"
        value="批量下架"
        class="btn btn-danger"
        @click="upOrDown(0)"
      />
      <input
        type="button"
        value="导出"
        class="btn btn-warning"
        @click="exportFn"
      />
      <input type="button" value="导入" class="btn btn-warning" />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr class="bg-primary">
          <td><input type="checkbox" v-model="checked" @click="allCheck" /></td>
          <td>Id</td>
          <td>门店名称</td>
          <td>门店电话</td>
          <td>地址</td>
          <td>图片</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list" :key="item.Id">
          <td>
            <input
              type="checkbox"
              :value="item.Id"
              v-model="ids"
              @change="oneCheck"
            />
          </td>
          <td>{{ item.Id }}</td>
          <td>{{ item.ShopName }}</td>
          <td>{{ item.Phone }}</td>
          <td>{{ item.Adderss }}</td>
          <td><img :src="item.Photo" width="100" height="100" /></td>
          <td>{{ item.State == 1 ? "开启" : "关闭" }}</td>
          <td>
            <input
              type="button"
              value="删除"
              class="btn btn-danger"
              @click="delOne(item.Id)"
            />
            <input
              type="button"
              value="修改"
              class="btn btn-success"
              @click="Update(item.Id)"
            />
            <input
              type="button"
              value="关闭"
              v-if="item.State == 1"
              class="btn btn-info"
            />
            <input
              type="button"
              value="开始"
              v-if="item.State == 0"
              class="btn btn-info"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <span>总条数:{{ data.count }}</span>
    <span>总页数:{{ data.page }}</span>
    <span>当前:{{ model.Index + "/" + data.page }}页</span>
    <div>
      <input type="button" value="首页" @click="gopage('a')" />
      <input type="button" value="上一页" @click="gopage('b')" />
      <input type="button" value="下一页" @click="gopage('c')" />
      <input type="button" value="尾页" @click="gopage('d')" />
      <input type="number" v-model="page" />
      <input type="button" value="跳转" @click="gopage(page)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

//导出
const exportFn = () => {
  location.href = `https://localhost:7291/api/Shop/ExportExecl?shopName=${model.shopName}&index=${model.Index}&size=${model.size}`;
};

//修改
const Update = (Id: any) => {
  //跳转
  router.push({
    path: "/ShopUpdate",
    query: {
      Id: Id,
    },
  });
};

//储存全选之后的id
let ids = ref([]);
//声明变量设置全选与全不选的按钮选中与不选中
let checked = ref(false);
//批量上架或者下架
const upOrDown = (state: any) => {
  //1.提示必选一项
  if (ids.value.length == 0) {
    alert("必选一项");
    return;
  }
  //2.发送网络请求改状态（ids  state）
  axios({
    url: "/api/Shop/UpOrDownAllShowItem",
    method: "put",
    params: {
      ids: ids.value.toString(),
      state: state,
    },
  })
    .then((res) => {
      console.log(res);
      if (res.data == 1) {
        alert("修改状态成功");
        checked.value = false;
        ids.value = [];
        getlist();
      } else {
        alert("修改状态失败");
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//单个删除
const delOne = (id: any) => {
  //1.提示信息
  let f = confirm("请问您确定要删除吗？");
  if (f) {
    //2.发送网络请求时行删除
    axios({
      url: "/api/Shop/DelAllShopItem",
      method: "delete",
      params: {
        ids: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert("删除成功");
          getlist();
        } else {
          alert("删除失败");
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//批量删除(传ids)
const delAll = () => {
  //1.提示必选一项？
  if (ids.value.length <= 0) {
    alert("必选一项");
    return;
  }
  //2.提示确定要删除吗？
  var f = confirm("请问确定要删除吗?");
  if (f) {
    //3.发送网络请求进行删除操作   ids.value  传后端口
    axios({
      url: "/api/Shop/DelAllShopItem",
      method: "delete",
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert("删除成功");
          checked.value = false;
          getlist();
        } else {
          alert("删除失败");
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//单个被选中
const oneCheck = () => {
  //思路：ids长度和data.list的长度相同  checked为true否则为false
  if (ids.value.length == data.list.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
};

//全选与全不选
const allCheck = () => {
  checked.value = !checked.value;

  if (checked.value == true) {
    ids.value = data.list.map((item: any) => {
      return item.Id;
    }); //作用就将data.list中的所有Id放到 ids中  map是循环的意思
  } else {
    ids.value = []; //将ids数组置空
  }
};

onMounted(() => {
  getlist();
});

//实现分页
const gopage = (str: any) => {
  switch (str) {
    case "a":
      if (model.Index == 1) {
        return;
      }
      model.Index = 1;
      break;
    case "b":
      if (model.Index == 1) {
        return;
      }
      model.Index--;
      break;
    case "c":
      //页码+1  到最后一页不能再加了
      if (model.Index == data.page) {
        return;
      }
      model.Index++;
      break;
    case "d":
      if (model.Index == data.page) {
        return;
      }
      model.Index = data.page;
      break;
    case str:
      //1 非空  2 小于总页数
      if (str == "") {
        alert("页数不能为空");
        return;
      }
      if (str < 0 || str > data.page) {
        alert("页数不能小于0,不能大于" + data.page);
        return;
      }
      model.Index = str;
      break;
  }
  getlist();
  page.value = model.Index;
};

//现实跳转传参
const router = useRouter();
//跳转到添加页面
const add = () => {
  router.push("/shopAdd"); //跳转到权益添加页面
};

let model = reactive({
  shopName: "",
  Index: 1,
  size: 2,
});

//接受后端的数据
let data = reactive({
  list: [],
  count: 0,
  page: 0,
});

//声明变量跳转到第几页
let page = ref(1);

//列表
const getlist = () => {
  axios({
    url: "/api/Shop/GetShopList",
    method: "get",
    params: model,
  })
    .then((res) => {
      console.log(res);
      data.list = res.data.list;
      data.count = res.data.count;
      data.page = res.data.page;
    })

    .catch((ree) => {
      console.log(ree);
    });
};
</script>

<style scoped>
</style>